<template>
  <div class="surely-table-wrapper surely-table-wrapper-bordered card-list-table">
    <div class="ant-spin-nested-loading">
      <div v-if="dataSource.length" class="ant-spin-container">
        <div class="surely-table-wrapper surely-table-wrapper-bordered">
          <a-checkbox-group v-model:value="selectedRowKeys" style="width: 100%; padding-right: 8px" @change="cardSelection">
            <a-row :gutter="[16, 16]">
              <!-- 卡片前插槽 -->
              <a-col
                v-if="$slots['prefix']"
                :xl="cardConfig.xl"
                :xxl="cardConfig.xxl"
                :lg="cardConfig.lg"
                :xs="cardConfig.xs"
                :sm="cardConfig.sm"
              >
                <slot name="prefix" />
              </a-col>
              <a-col
                v-for="(item, index) in dataSource"
                :key="index"
                :xl="cardConfig.xl"
                :xxl="cardConfig.xxl"
                :lg="cardConfig.lg"
                :xs="cardConfig.xs"
                :sm="cardConfig.sm"
              >
                <slot name="card" :record="item" />
                <a-checkbox v-if="rowSelectionObj" :value="getCheckBoxValue(item)" />
              </a-col>
              <!-- 卡片后插槽 -->
              <a-col
                v-if="$slots['suffix']"
                :xl="cardConfig.xl"
                :xxl="cardConfig.xxl"
                :lg="cardConfig.lg"
                :xs="cardConfig.xs"
                :sm="cardConfig.sm"
              >
                <slot name="suffix" />
              </a-col>
            </a-row>
          </a-checkbox-group>
        </div>
        <template v-if="pagination !== false">
          <Pagination
            v-bind="attrs"
            v-model:current="pageParameter.page"
            class="tableCustomPage"
            size="small"
            :page-size="pageParameter.pageSize"
            :page-size-options="getPageSizeOptions"
            :total="pageParameter.total"
            :show-size-changer="!showCustomPageSize"
            :show-less-items="true"
            :simple="paginationSimple"
            :show-quick-jumper="!showCustomPageSize"
            :show-total="(total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条记录`"
            @change="handlePaginationChange"
          />
        </template>
      </div>
      <template v-else>
        <a-empty :image="simpleImage" />
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Pagination, Empty } from 'ant-design-vue';
import { settings } from '@/settings';
const $emit = defineEmits(['pageSizeChange', 'cardSelection']);
const attrs = useAttrs();
const getPageSizeOptions = settings?.table?.pageSizeOptions || ['10', '20', '30', '40', '50'];
const props = defineProps({
  /** 数据源集合 */
  dataSource: { type: Array, default: () => [] },
  /** 列表项是否可选择 */
  rowSelection: { type: Object, default: null },
  /** 卡片配置 */
  cardConfig: {
    type: Object,
    default: () => ({
      xxl: 6,
      xl: 8,
      lg: 8,
      sm: 12,
      xs: 24
    })
  },
  /** 开启自定义可输可选分页条数 */
  showCustomPageSize: { type: Boolean, default: false },
  /** 主键继承表格对应属性 */
  rowKey: { type: [String, Function], required: true },
  /** 分页对象 */
  pagination: { type: [Boolean, Object], default: undefined },
  /** 是否简约风格分页 */
  paginationSimple: { type: Boolean, default: false },
  /** 分页参数 */
  pageParameter: {
    type: Object,
    default: () => ({
      page: 1,
      pageSize: settings?.table?.pageSize || 20,
      total: 0
    })
  }
});
const simpleImage = ref(Empty.PRESENTED_IMAGE_SIMPLE);
// 选中主键集合
const selectedRowKeys = ref([]);
// 表格组件rowSelection属性
const rowSelectionObj = ref();
// 暂未实现
const rowSelectionType = ref('checkbox');
onMounted(() => {
  rowSelectionObj.value = props.rowSelection;
});
watch(
  () => props.cardConfig,
  (val) => {
    if (val) {
      props.cardConfig.xl = props.cardConfig.xl ? props.cardConfig.xl : 8;
      props.cardConfig.xxl = props.cardConfig.xxl ? props.cardConfig.xxl : 6;
      props.cardConfig.lg = props.cardConfig.lg ? props.cardConfig.lg : 8;
      props.cardConfig.xs = props.cardConfig.xs ? props.cardConfig.xs : 24;
      props.cardConfig.sm = props.cardConfig.sm ? props.cardConfig.sm : 12;
    }
  }
);
// 监听props.rowSelection变化
watch(
  () => props.rowSelection,
  (val) => {
    selectedRowKeys.value = val == null ? [] : val.selectedRowKeys;
    rowSelectionObj.value = val;
    if (rowSelectionObj.value) {
      const { type } = rowSelectionObj.value;
      if (type && type === 'radio') {
        rowSelectionType.value = 'radio';
      }
    }
  }
);
/**
 * 卡片点击事件
 */
// function handleCardClick(item) {
//   // 没选中时选中，已选中取选中
//   const selectValue = getCheckBoxValue(item);
//   if (selectedRowKeys.value.includes(selectValue)) {
//     selectedRowKeys.value = selectedRowKeys.value.filter((item) => item !== selectValue);
//   } else {
//     selectedRowKeys.value.push(selectValue);
//   }
//   cardSelection(selectedRowKeys.value);
// }
/**
 * 分页事件
 */
function handlePaginationChange(page, pageSize) {
  $emit('pageSizeChange', page, pageSize);
}
/**
 * 获取选中值
 */
function getCheckBoxValue(item) {
  const checkedValue = props.rowKey instanceof Function ? props.rowKey(item) : item[props.rowKey];
  return checkedValue;
}
/**
 * 表格选择事件
 */
function cardSelection(selectedRowKeys) {
  selectedRowKeys.value = selectedRowKeys;
  // 选中行
  const selectedRow = props.dataSource.filter((item) => selectedRowKeys.includes(getCheckBoxValue(item)));
  $emit('cardSelection', selectedRow, selectedRowKeys);
}
</script>
